<script setup lang='ts'>
import { ref, onMounted } from 'vue'
import {getDeptsApi, delDeptsApi} from '@/api/departments.ts'
import type {DeptsData, Depts} from '@/types/departments'
import {transListToTreeData} from '@/utils/index'
// @ts-ignore
import {ElMessageBox, ElMessage} from 'element-plus'
// @ts-ignore
import AddDepts from './components/add-depts.vue'

// 定义部门对象
const deptsData = ref<DeptsData>()
// 定义部门列表数组
const depts = ref<Depts[]>([])
// loading 效果
const loading = ref<boolean>(false)
// 获取弹层实例
const addDeptsRef = ref<InstanceType<typeof AddDepts>>()


// 获取部门数据
const getDepts = async () => {
  loading.value = true
  const res = await getDeptsApi()
  deptsData.value = res.data
  // 将平铺数据转换成树形结构
  depts.value = transListToTreeData(res.data.depts, '')
  loading.value = false
}

// dropdown 点击的 删除 编辑 添加其中一项
// 声名 点击dropdown的每一项 返回的数据类型
type TypeCmd = {
  type: 'add' | 'edit' | 'del'
  data: Depts
}
const handleCommand = (cmd: TypeCmd) => {
  // 判断点击的是哪一项
  if (cmd.type === 'add') {
    // 添加部门
    addDeptsFn(cmd.data.id)
  }
  if (cmd.type === 'edit') {
    // 编辑部门
    editDeptsFn(cmd.data.id)
  }
  if (cmd.type === 'del') {
    // 删除部门
    delDeptsFn(cmd.data.id)
  }
}


// 添加部门
const addDeptsFn = (id: string) =>{
  // 打开弹层
  addDeptsRef.value?.openDialog(id, 'add')
  // 获取部门详情
  addDeptsRef.value?.getDeptsList()
}

// 编辑部门
const editDeptsFn = (id: string) => {
  // 打开弹层
  addDeptsRef.value?.openDialog(id, 'edit')
  // 获取部门详情
  addDeptsRef.value?.getDeptsList()
}

// 删除部门
const delDeptsFn = async (id: string) => {
  // 提示用户是否删除
  await ElMessageBox.confirm('是否删除该部门', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await delDeptsApi(id)
  // 提示删除成功
  ElMessage.success('删除部门成功')
  // 重新拉取数据
  getDepts()
}



onMounted(() => {
  getDepts()
})
   
</script>

<template>
  <div class="dashboard-container">
    <div class="app-container">

      <!-- 类容模块 -->
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
          <el-col :span="20">
             {{deptsData?.companyName}}
          </el-col>
          <el-col :span="4">
            <el-row type="flex">
              <!-- 两个内容 -->
              <el-col :span="12">负责人</el-col>
              <el-col :span="12">
                <!-- 下拉菜单 element -->
                <el-dropdown>
                  <span style="cursor: pointer;">
                    操作<i class="el-icon-arrow-down" />
                  </span>
                  <!-- 下拉菜单 -->
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="addDeptsFn('')">添加子部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 放置一个el-tree组件 -->
        <el-tree :data="depts" default-expand-all v-loading="loading">
          <!-- 用了一个行列布局 -->
          <template #default="{ data }">
            <el-row type="flex" justify="space-between" align="middle" style="height: 40px; width: 100%;">
              <el-col :span="20">
                <span>{{ data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col :span="12">{{ data.manager }}</el-col>
                  <el-col :span="12">
                    <!-- 下拉菜单 element -->
                    <el-dropdown @command="handleCommand">
                      <span> 操作<el-icon class="el-icon--right"><arrow-down /></el-icon></span>
                      <!-- 下拉菜单 -->
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item :command="{type: 'add', data}">添加子部门</el-dropdown-item>
                          <el-dropdown-item :command="{type: 'edit', data} ">编辑部门</el-dropdown-item>
                          <el-dropdown-item :command="{type: 'del', data} ">删除部门</el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>

      <!-- 弹层模块 -->
      <add-depts ref="addDeptsRef" @getDepts="getDepts"></add-depts>
     </div>
  </div>
</template>

<style scoped lang="scss">
.tree-card {
  padding: 30px 30px;
  font-size: 14px;
}
</style>